<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.device_no" placeholder="设备编号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getMonitorData">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="monitorData" border highlight-current-row v-loading="listLoading" style="width: 100%;" @row-click="selectRow">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="device_no" label="设备编号" min-width="160">
			</el-table-column>
			<el-table-column prop="param1" label="pm2.5" width="140">
			</el-table-column>
			<el-table-column prop="param2" label="pm10" width="140">
			</el-table-column>
			<el-table-column prop="param3" label="pm100" width="140">
			</el-table-column>
			<el-table-column prop="param4" label="温度" width="140">
			</el-table-column>
			<el-table-column prop="param5" label="湿度" width="140">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
					<el-button size="small" @click="handlePosition(scope.$index, scope.row)">位置</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="30" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="详情" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="90px" ref="editForm">
				<el-form-item label="设备编号" prop="device_no">
					<el-input v-model="editForm.device_no" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="pm2.5">
					<el-input v-model="editForm.param1" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="pm10">
					<el-input v-model="editForm.param2" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="pm100">
					<el-input v-model="editForm.param3" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="温度">
					<el-input v-model="editForm.param4" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="湿度">
					<el-input v-model="editForm.param5" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="风速">
					<el-input v-model="editForm.param6" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="风向" prop="param7">
          			<el-select v-model="editForm.param7" placeholder=" " :disabled="true">
            			<el-option v-for="item in directionEmu" :key="item.key" :label="item.value" :value="item.key">
            			</el-option>
          			</el-select>
        		</el-form-item>
				<el-form-item style="width:240px" label="风角度">
					<el-input v-model="editForm.param8" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="噪声">
					<el-input v-model="editForm.param9" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="主板" prop="param10">
          			<el-select v-model="editForm.param10" placeholder=" " :disabled="true">
            			<el-option v-for="item in lostEmu" :key="item.key" :label="item.value" :value="item.key">
            			</el-option>
          			</el-select>
        		</el-form-item>
				<el-form-item style="width:240px" label="经度">
					<el-input v-model="editForm.longitude" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="纬度">
					<el-input v-model="editForm.latitude" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item style="width:240px" label="上传时间">
					<el-input v-model="editForm.upload_at" :disabled="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click.native="editFormVisible = false">确定</el-button>
			</div>
		</el-dialog>

	</section>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        device_no: ""
      },
      monitorData: [],
      total: 0,
      page: 1,
      listLoading: false,

      directionEmu: [
        {
          key: "0",
          value: "北风"
        },
        {
          key: "1",
          value: "东北风"
        },
        {
          key: "2",
          value: "东风"
        },
        {
          key: "3",
          value: "东南风"
        },
        {
          key: "4",
          value: "南风"
        },
        {
          key: "5",
          value: "西南风"
        },
        {
          key: "6",
          value: "西风"
        },
        {
          key: "7",
          value: "西北风"
        }
      ],

      lostEmu: [
        {
          key: "0",
          value: "丢失"
        },
        {
          key: "1",
          value: "正常"
        }
      ],

      //编辑界面
      editFormVisible: false,
      editLoading: false,
      editForm: {
        device_no: "",
        param1: null,
        param2: null,
        param3: null,
        param4: null,
        param5: null,
        param6: null,
        param7: null,
        param8: null,
        param9: null,
        param10: null,
        longitude: null,
        latitude: null,
        upload_at: null
      }
    };
  },
  methods: {
    handleCurrentChange: function(val) {
      this.page = val;
      this.getMonitorData();
    },
    formatDirection: function(row, column) {
      for (let i = 0; i < this.directionEmu.length; i++) {
        if (parseInt(row.param7) == this.directionEmu[i].key) {
          return this.directionEmu[i].value;
        }
      }
      return "未知类型";
    },
    formatLost: function(row, column) {
      for (let i = 0; i < this.lostEmu.length; i++) {
        if (parseInt(row.param10) == this.lostEmu[i].key) {
          return this.lostEmu[i].value;
        }
      }
      return "未知类型";
    },
    //获取数据列表
    getMonitorData: function() {
      if (this.filters.device_no) {
        this.listLoading = true;

        let token = sessionStorage.getItem("token");
        let params = this.formatHttpGetParams({
          page: this.page,
          size: 30,
          token: token
        });
        let path =
          "api/monitor/download/latest/" + String.trim(this.filters.device_no);
        this.$http.get(this.$store.state.domain + path + params).then(
          function(res) {
            if (res.body.respCode == "0000") {
              this.total = res.body.count;
              this.monitorData = res.body.data;
            } else {
              if (res.body.respMsg != null) {
                alert(res.body.respMsg);
              } else {
                alert("后台未知异常，请与管理员联系");
              }
            }
            this.listLoading = false;
          },
          function() {
            alert("网络请求处理失败");
            this.listLoading = false;
          }
        );
      }
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    //处理位置信息
    handlePosition: function(index, row) {
      if (row.longitude && row.latitude) {
        let lng = parseFloat(row.longitude);
        let lat = parseFloat(row.latitude);
        if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
          let params = this.formatHttpGetParams({
            lng: row.longitude,
            lat: row.latitude
          });
          let mapUrl = this.$store.state.mapDomain + params;
          window.open(mapUrl);
        } else {
          alert("坐标不在指定范围内");
        }
      } else {
        alert("坐标不存在");
      }
    },
    selectRow: function(row, event, column) {
      if (column.property.substr(0, 5) == "param") {
        this.$router.push({
          path: "/echarts",
          query: { device_no: row.device_no, ele: column.property }
        });
      } else {
        this.$router.push({
          path: "/echarts",
          query: { device_no: row.device_no, ele: "all" }
        });
      }
    }
  },
  mounted() {
    if (this.$route.query.device_no) {
      this.filters.device_no = this.$route.query.device_no;
    }
    this.getMonitorData();
  }
};
</script>

<style scoped>

</style>